<template>
    <div>
        <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit" width="1000"
                     height="593" :saveFlag="false">
            <template slot="body">
                <vxe-grid border
                          resizable
                          export-config
                          import-config
                          keep-source
                          tableId="data-table"
                          ref="xGrid"
                          id="toolbar_demo_1"
                          height="500"
                          :loading="tableLoading"
                          :data="tableData"
                          :toolbar="tableToolbar">
                    <template slot="buttons">
                        <div style="float: right;margin-right: 12px;">
                            <el-button icon="el-icon-circle-plus" size="medium" circle  @click="create"></el-button>
                        </div>
                    </template>
                    <vxe-table-column field="Realname" title="成员" sortable :filters="[{ data: '' }]" :filter-method="filterAgeMethod">
                        <template v-slot="{ row }">
                            <span>{{ row.Realname }}</span>
                        </template>
                      <template v-slot:filter="{ $panel, column }">
                        <el-input v-for="(option, index) in column.filters" :key="index" v-model="option.data"
                                  @input="$panel.changeOption($event, !!option.data, option)"></el-input>
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="position" title="职称" sortable>
                        <template v-slot="{ row }">
                            <span>{{ row.Departname }}</span>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="Status" title="操作" width="100px" align="center">
                        <template v-slot="{ row }">
                            <vxe-button status="danger" @click="del(row)" size="small">删除</vxe-button>
                        </template>
                    </vxe-table-column>
                </vxe-grid>
            </template>
        </dialog-edit>
        <groupMemberAdd :visible.sync="memberVisible" title="组成员新增" :groupId="groupId" @search="search"></groupMemberAdd>
    </div>
</template>

<script>
    import dialogEdit from '@/components/element/dialogEdit'
    // import {groupUserApi} from '@/api/organizationApiNow.js'
    import groupUserApi from '@/api/organizationApi/groupUserApi.js'
    import groupMemberAdd from "./groupMemberAdd";

    export default {
        components: {
            dialogEdit,
            groupMemberAdd
        },
        computed: {
            dialogVisible: {
                get: function () {
                    return this.visible
                },
                set: function (value) {
                    this.$emit('update:visible', value)
                }
            }
        },
        props: {
            visible: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            groupId: {
                type: [String, Number],
                default() {
                    return null;
                }
            }
        },
        data() {
            return {
                memberVisible: false,
                tableLoading: false,
                tableData: [],
                tableToolbar: {}
            }
        },
        methods: {
          filterAgeMethod ({ option, row }) {
            return row.Realname.indexOf(option.data) >= 0
          },
            create() {
                this.memberVisible = true
            },
            del(row) {
                let idss = []
                idss.push(row.Id)
                let obj = {
                    ids: idss,
                }
                groupUserApi._delete(idss).then(res => {
                    this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
                    this.search()
                })
            },
            search() {
                this.tableLoading = true
                groupUserApi.getList({Id: this.groupId}).then(res => {
                    this.tableData = res
                }).finally((_) => {
                    this.tableLoading = false
                })
            }
        },
        watch: {
            'visible': {
                handler(val) {
                    if (val) {
                        this.search()
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
